import { TabBar } from 'antd-mobile'
import React from 'react'
import {
    useHistory,
    useLocation,
} from 'react-router-dom'
import "./style.scss"


const Index = ({ routes }) => {
    const history = useHistory()
    const location = useLocation()
    const { pathname } = location

    const setRouteActive = (value) => {
        history.push(value)
    }


    return (
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
            {routes.map((item, index) => (
                <TabBar.Item key={item.path} icon={item.icons} title={item.name} />
            ))}
        </TabBar>
    )
}
export default Index;
